<template>
    <!-- 底部导航栏 -->
    <nav class="bottom-nav">
      <router-link 
        v-for="item in navItems" 
        :key="item.path" 
        :to="item.path"
        custom
        v-slot="{ isActive }"
      >
        <div 
          class="nav-item" 
          :class="{ 'active': isActive }"
          @click="handleNavClick(item)"
        >
          <div class="nav-icon">
            {{ item.icon }}
            <span 
              v-if="item.name === '消息' && unreadCount > 0" 
              class="message-count"
            >
              {{ unreadCount }}
            </span>
            <span 
              v-if="item.name === '我' && hasNewNotification" 
              class="notification-dot"
            ></span>
          </div>
          <span class="nav-text">{{ item.name }}</span>
        </div>
      </router-link>
    </nav>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  
  const router = useRouter()
  const route = useRoute()
  
  // 导航配置项
  const navItems = ref([
    { path: '/', name: '推荐', icon: '🔍' },
    { path: '/Meeting', name: '见面', icon: '👥' },
    { path: '/Profile', name: '动态', icon: '📱' },
    { path: '/Message', name: '消息', icon: '💬' },
    { path: '/Mine', name: '我', icon: '👤' }
  ])
  
  // 模拟数据
  const unreadCount = ref(27)
  const hasNewNotification = ref(true)
  
  // 处理导航点击
  const handleNavClick = (item) => {
    // 可以在这里添加点击逻辑
    router.push(item.path);
    console.log('Navigating to:', item.path)
  }
  
  // 自动高亮当前路由
  const currentPath = computed(() => route.path)
  </script>
  
  <style scoped>
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background-color: white;
    padding: 8px 0;
    border-top: 1px solid #f0f0f0;
    max-width: 414px;
    margin: 0 auto;
    z-index: 1000;
  }
  
  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    padding: 4px 12px;
    transition: all 0.2s;
    position: relative;
  }
  
  .nav-item.active {
    color: #6366f1;
    transform: translateY(-2px);
  }
  
  .nav-icon {
    font-size: 24px;
    margin-bottom: 2px;
    position: relative;
  }
  
  .message-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: #ff4444;
    color: white;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }
  
  .notification-dot {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 8px;
    height: 8px;
    background-color: #ff4444;
    border-radius: 50%;
  }
  
  /* 响应式设计 */
  @media (max-width: 375px) {
    .nav-item {
      padding: 4px 8px;
    }
    
    .nav-icon {
      font-size: 22px;
    }
    
    .nav-text {
      font-size: 10px;
    }
  }
  </style>